<template>
	<view v-if="isObjNone(data)">
		<u-navbar title="合同详情" @rightClick="jump('/pages/contract/download')" :autoBack="true" rightText="下载列表">
		</u-navbar>

		<view class="top"></view>

		<view class="start" :class="{'start_0':data.contract_status === 1}">
			<view class="flex-between">
				<view class="font-32">{{data.address}}</view>
				<view class="font-28">{{data.contract_status === 1 ? '等待签字' : '合同已签'}}</view>
			</view>
			<view class="m-t-4 font-28">6-2408</view>
		</view>

		<view class="h-20 back-color-h"></view>

		<view class="back-color-c p-l-30 p-r-30 p-t-28 p-b-34">
			<view class="flex-between">
				<view class="flex">合同详情<u-icon class="m-l-10" name="arrow-right" color="#CCCCCC" size="18rpx"></u-icon>
				</view>
				<view class="flex font-28 color-b" v-if="data.contract_status !== 1">
					<text class="m-r-42" @click="downDocuments(1)">预览</text>
					<text @click="downDocuments(2)">下载PDF</text>
				</view>
				<view v-else class="flex font-28 color-b" @click="qianhetong">签合同</view>
			</view>
			<view class="font-28 color-a m-t-28">
				合同编号：<text class="color-d">{{data.contract_no}}</text>
			</view>
			<view class="flex">
				<view class="font-28 color-a m-t-28 flex-1">
					合同类型：<text class="color-d">{{data.contract_type === 1 ? '运营合同' : '装修合同'}}</text>
				</view>
				<view v-if="data.contract_type === 1" class="font-28 color-a m-t-28 flex-1">
					保底收益：<text class="color-d">1800元/月</text>
				</view>
				<view v-else class="font-28 color-a m-t-28 flex-1">
					装修面积：<text class="color-d">{{data.registration_area}}m²</text>
				</view>
			</view>
			<view v-if="data.contract_type === 1" class="font-28 color-a m-t-28">
				运营期限：<text
					class="color-d">{{data.start_time | date('yyyy-mm-dd')}}～{{data.end_time | date('yyyy-mm-dd')}}</text>
			</view>
			<view v-else class="font-28 color-a m-t-28">装修期限：<text class="color-d">{{data.project_time_limit}}个月</text>
			</view>
			<view class="flex">
				<view class="font-28 color-a m-t-28 flex-1">
					共计：<text class="color-d">{{data.total}}个月</text>
				</view>
				<view v-if="data.contract_type === 1" class="font-28 color-a m-t-28 flex-1">
					运营管理费：<text class="color-d">运营期限免交</text>
				</view>
				<view v-else class="font-28 color-a m-t-28 flex-1">
					基础装修费：<text class="color-d">{{data.based_on_cost}}元</text>
				</view>
			</view>
			<view class="flex">
				<view v-if="data.contract_type === 1" class="font-28 color-a m-t-28 flex-1">
					分成比例：<text class="color-d">{{data.prorate_dividends}}%</text>
				</view>
				<view v-else class="font-28 color-a m-t-28 flex-1">
					增项装修费：<text class="color-d">{{data.to_add_items_to_decorate_cost}}元</text>
				</view>
				<view v-if="data.contract_type === 1" class="font-28 color-a m-t-28 flex-1">
					收益支付时间：<text class="color-d">每月15日</text>
				</view>
				<view v-else class="font-28 color-a m-t-28 flex-1">
					合计：<text class="color-d">{{data.agent_id_card}}元</text>
				</view>
			</view>
		</view>

		<view class="h-20 back-color-h"></view>

		<view class="back-color-c p-l-30 p-r-30 p-t-28 p-b-34" v-if="data.member_info.realname">
			<view class="flex-between">
				<view class="flex">房东信息</view>
			</view>
			<view class="font-28 color-a m-t-28">
				房东姓名：<text class="color-d">{{data.member_info.realname}}</text>
			</view>
			<view class="font-28 color-a m-t-28 flex">
				房东手机：<text class="color-d m-r-10">{{data.member_info.mobile}}</text>
				<u-icon name="phone" color="#FB2D19" size="40rpx" @click='callPhone(data.member_info.mobile)'></u-icon>
			</view>
			<view class="font-28 color-a m-t-28">
				证件号码：<text class="color-d">{{data.member_info.id_card}}</text>
			</view>
			<view class="font-28 color-a m-t-28 df">
				<view class="line">联系地址：</view>
				<view class="color-d">{{data.member_info.address}}</view>
			</view>
			<view class="font-28 color-a m-t-28" v-if="data.member_info.email">
				电子邮箱：<text class="color-d">{{data.member_info.email}}</text>
			</view>
		</view>

		<view class="h-20 back-color-h" v-if="data.agent_name"></view>

		<view class="back-color-c p-l-30 p-r-30 p-t-28 p-b-34" v-if="data.agent_name">
			<view class="flex-between">
				<view class="flex">委托代理人信息</view>
			</view>
			<view class="font-28 color-a m-t-28">
				代理人姓名：<text class="color-d">{{data.agent_name}}</text>
			</view>
			<view class="font-28 color-a m-t-28 flex">
				代理人手机：<text class="color-d m-r-10">{{data.agent_mobile}}</text>
				<u-icon name="phone" color="#FB2D19" size="40rpx" @click='callPhone(data.agent_mobile)'></u-icon>
			</view>
			<view class="font-28 color-a m-t-28">
				证件号码：<text class="color-d">{{data.member_info.id_card}}</text>
			</view>
			<view class="font-28 color-a m-t-28 df">
				<view class="line">联系地址：</view>
				<view class="color-d">{{data.agent_full_address}}</view>
			</view>
			<view class="font-28 color-a m-t-28">
				电子邮箱：<text class="color-d">{{data.agent_email}}</text>
			</view>
		</view>

		<view class="h-20 back-color-h" v-if="data.contracted_company"></view>

		<view class="back-color-c p-l-30 p-r-30 p-t-28 p-b-34" v-if="data.contracted_company">
			<view class="flex-between">
				<view class="flex">承包方信息</view>
			</view>
			<view class="font-28 color-a m-t-28">
				承包方：<text class="color-d">{{data.contracted_company}}</text>
			</view>
			<view class="font-28 color-a m-t-28 flex">
				联系电话：<text class="color-d m-r-10">{{data.member_info.mobile}}</text>
				<u-icon name="phone" color="#FB2D19" size="40rpx" @click='callPhone(data.member_info.mobile)'></u-icon>
			</view>
			<view class="font-28 color-a m-t-28 df">
				<view class="line">联系地址：</view>
				<view class="color-d">{{data.contracted_full_address}}</view>
			</view>
		</view>

		<view class="h-20 back-color-h"></view>
		<Watermark color='#FFF1F1' :watermark="mark" :maxWidth="200" />
	</view>
</template>

<script>
	export default {
		name: 'contractDetails',
		data() {
			return {
				data: {},
				id: ''
			}
		},
		onLoad(ops) {
			if (ops.id) {
				this.id = ops.id
				this.getLandlordContractInfo()
			}
		},
		methods: {
			qianhetong() {
				// #ifdef H5
				window.location.href = this.data.pdf_url
				// #endif
				// #ifdef APP-PLUS
				this.jump(`/pages/webview/index?src=${encodeURI(this.data.pdf_url)}`)
				// #endif
			},
			// 下载合同
			async downDocuments(type) {
				let data = {
					contract_id: this.id,
					type
				}
				const res = await this.$api.common.landlord('downDocuments', data)
				if (res.code === 200) {
					if (type === 1) {
						this.jump(`/pages/webview/pdf?src=${encodeURI(res.data.oss_pdf_url)}`)
					} else {
						this.download(res.data.oss_pdf_url)
					}
					// this.data = res.data
				}
			},
			async getLandlordContractInfo() {
				let data = {
					contract_id: this.id
				}
				const res = await this.$api.common.landlord('getLandlordContractInfo', data)
				if (res.code === 200) {
					this.data = res.data
				}
			}
		},
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.start {
		height: 160rpx;
		background: linear-gradient(270deg, #319ea8 0%, #FB2D19 100%);
		color: $c;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.start_0 {
		background: linear-gradient(270deg, #CCCCCC 0%, #999999 100%) !important;
	}

	.line {
		white-space: nowrap;
	}
</style>
